<template>
  <div class="notice_box">
    <img src="../../assets/image/bg3.png" alt="" />
    <el-tabs v-model="activeName" class="notice_box_list">
      <el-tab-pane label="公告展示" name="first">
        <!-- v-for="(item,index) in noticeList" :key="`notice_${index}`" -->
        <div class="list_item" v-for="(item,index) in noticeList" :key="`notice_${item.id}`">
          <div class="time">
            <div>{{item.month}}/{{item.day}}</div>
            <p>{{item.year}}</p>
          </div>
          <div class="text">
            <p>公告{{index + 1}}</p>
            <p>{{item.message}}</p>
          </div>
        </div>
        <!-- <div class="list_item">
          <div class="time">
            <div>04/01</div>
            <p>2024</p>
          </div>
          <div class="text">
            <p>女生生日送花需注意什么?</p>
            <p>女生生日送花需注意什么？女孩子都很注重细节，不管你的礼物是否贵重，用心是非常重要的，她会感觉的到，并会被你感动。是女生生日送花需注意什么？女孩子都很注重细节，不管你的礼物是否贵重，用心是非常重要的，她会感觉的到，并会被你感动。是</p>
          </div>
        </div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getAllinform} from '@/api/inform';
export default {
  data(){
    return{
      activeName: 'first',
      noticeList:[]
    }
  },
  created(){
    this.queryLsit()
  },
  methods:{
    queryLsit(){
      getAllinform().then(res=>{
        console.log(res,'oooo')
        let data = res.data || []
        this.noticeList = data.map(item => {
          let str = item.updateTime?.split(' ')[0]
          let time = str.split('-')
          item.year =  time[0]
          item.month =  time[1]
          item.day =  time[2]
          return item
        })
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.notice_box{
  &_list{
    width: 80vw;
    margin: 15px auto;
    .list_item{
      display: flex;
      border-bottom: 1px dashed #cbc9c9;
      padding-bottom: 15px;
      margin-bottom: 30px;
      .time{
        text-align: center;
        margin-right: 15px;
        div{
          font-size: 2em;
          font-weight: 800;
        }
      }
      .text{
        flex: 1;
        p:last-child{
          width: 70vw;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #666666;
        }
      }
    }
  }
}
</style>
